이벤트 버블링과 캡쳐링

❓질문

이벤트 버블링과 캡쳐링에 대해서 설명해주세요

💡 조사하기전 내가 알고 있던 내용

이벤트 캡쳐링은 이벤트 전파에서 상위 요소에서 하위 요소로 이벤트가 전파 되는 현상이고 반대로 버블링은 하위 요소에서 상위 요소로 이벤트가 전파되는 현상입니다.

버블링은 이벤트 위임 같은 패턴을 활용해서 하위 요소에서 이벤트를 처리하는것이 아닌 상위 요소에서 한번에 이벤트를 처리하는등의 방법으로 효율적으로 이벤트를 관리 할수있습니다.

반면 캡쳐링은 하위요소로 가기전 먼저 상위 요소에서 중간에 미들웨어처럼 검증하는 로직을 추가하는등의 효과를 볼 수 있습니다.

🏫 정리한 내용

이벤트 버블링은 이벤트가 발생했을 때 가장 안쪽의 타겟 요소에서 시작하여 부모 요소로 전파되는 방식입니다. 예를 들어, 버튼을 클릭했을 때 버튼 자체에서 이벤트가 발생한 후 이 이벤트가 상위 요소인 div, body, document, window로 전파 되는 과정을 거치게 됩니다. 기본적으로 브라우저는 이벤트 전파를 버블링 단계에서 처리하도록 설계되어 있습니다.

반면 이벤트 캡쳐링은 이와 반대 방향으로진행 됩니다. 즉, 이벤트가 최상위 부모 요소에서 시작해 점점 타겟 요소로 내려오면서 전파됩니다. 예를 들어 window에서 이벤트가 시작되어 document,body, div를 거쳐 버튼에 도달하게 되는 방식입니다. 기본적으로 캡쳐링 단계는 비활성화 되어 있지만, addEventListener 함수의 세번째 옵션으로 캡쳐링을 활성화할 수 있습니다. 이 옵션에서 true로 설정하면 캡쳐링 단계에서 이벤트를 처리할 수 있습니다.

이벤트 버블링과 캡쳐링 과정에서 발생할 수 있는 문제도 있습니다. 이벤트 중첩으로 인해 동일 이벤트가 중복 처리되는 상황이나 캡쳐링 단계에서 불필요한 이벤트가 처리되는 성능문제, 이벤트 위임시 타겟 오작동등 다양한 사례가 있습니다.

이는 브라우저의 기본 동작을 방지하는 preventDefault 나 특정 이벤트가 현재 단계에서 멈추고 전파를 막는 stopPropagation 메서드로 해결할 수 있습니다.